﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>所有类别 - DTcms网站管理系统</title>
    <link rel="stylesheet" type="text/css" href="css/pagination.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
</head>

<body id="goods">

<!--页面头部-->
<div id="header"></div>
<script>$("#header").load("_header.html");</script>
<!--/页面头部-->

<div id="app">

    <!--当前位置-->
    <div class="section">
        <div class="location">
            <span>当前位置：</span>
            <a href="index.html">首页</a> &gt;
            <a href="goods.html">购物商城</a>

            <!-- 面包屑导航 -->
            <template v-if="category.parent !== null">
                &nbsp;&gt;&nbsp;<a :href="'list.html?category=' + category.parent.id">{{ category.parent.title }}</a>&nbsp;&gt;&nbsp;
                <a :href="'list.html?category=' + category.id">{{ category.title }}</a>
            </template>
            <template v-else>
                &gt;&nbsp;<a :href="'list.html?category=' + category.id">{{ category.title }}</a>
            </template>

        </div>
    </div>
    <!--/当前位置-->

    <!--/分类导航-->
    <div class="section">
        <div class="wrapper clearfix">

            <!--/分类-->
            <div class="sort-box">

                <a @click="on_sort('create_time')" :class="ordering=='create_time'?'selected':''" >上架时间</a>
                <a @click="on_sort('sales')" :class="ordering=='sales'?'selected':''" >按人气</a>
                <a @click="on_sort('sell_price')" :class="ordering=='sell_price'?'selected':''" >价格从高到低</a>
                <a @click="on_sort('-sell_price')" :class="ordering=='-sell_price'?'selected':''" >价格从低到高</a>

            </div>

        </div>
    </div>
    <!--/分类导航-->

    <!--商品列表-->
    <div class="section">
        <div class="wrapper clearfix">
            <ul class="img-list">

                <!-- 循环显示多个商品信息 -->
                <li v-for="(goods, index) in goods_list">
                    <a :href="'goods_detail.html?id=' + goods.id">
                        <div class="img-box">
                            <img :src="goods.img_url"/>
                        </div>

                        <div class="info">
                            <h3>{{ goods.title }}</h3>
                            <p class="price">¥{{ goods.sell_price }} 元</p>
                            <p>
                                <strong>库存: {{ goods.stock }}</strong>
                                <span>市场价：<s>{{ goods.market_price }}</s></span>
                            </p>
                        </div>
                    </a>
                </li>

            </ul>

            <!--页码列表-->
            <div class="page-box" style="margin:15px 0 0;">
                <div class="digg"></div>
            </div>
            <!--/页码列表-->
        </div>
    </div>
    <!--/商品列表-->
</div>

<!--页面底部-->
<div id="footer"></div>
<script>$("#footer").load("_footer.html");</script>
<!--/页面底部-->

<script type="text/javascript" src="js/vue-2.5.16.js"></script>
<script type="text/javascript" src="js/axios-0.18.0.min.js"></script>
<script src="js/list.js"></script>

</body>
</html>